<template>
  <div class="w-full h-8 leading-8 pl-3" style="background: linear-gradient(#018f94, #66c7cb)">
    <span class="font-bold">{{ title }}</span>
    <span class="text-base">{{ unit }}</span>
    <span class="float-right mr-3">
      <el-select
        v-model="type"
        placeholder="请选择"
        clearable
        size="small"
        style="width: 100px"
        @change="handleChange"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </span>
  </div>
  <ul style="background: linear-gradient(#011c1f, transparent)">
    <li
      v-for="item in data"
      v-if="dataLength > 5"
      class="flex justify-between mx-4 text-sm"
      style="height: 34px; line-height: 63px"
    >
      <span>{{ item.name }}</span>
      <span class="text-xl font-bold text-cyan-400 mt-4">{{ item.value }}</span>
    </li>
    <li
      v-for="item in data"
      v-else
      class="flex justify-between mx-4 text-sm"
      style="height: 56px; line-height: 86px"
    >
      <span>{{ item.name }}</span>
      <span class="text-xl font-bold text-cyan-400 mt-7">{{ item.value }}</span>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { ref, defineProps, reactive } from "vue";

// 接收参数
const props = defineProps({
  data: Array,
  title: String,
  unit: String
});
const dataLength = props.data.length;
const title = props.title;

const type = ref<number>(0);
const options = reactive<Array>([
  { label: "（全部）", value: 0 },
  { label: "肿瘤科", value: 1 },
  { label: "外科", value: 2 },
  { label: "内科", value: 3 },
  { label: "儿科", value: 4 },
  { label: "妇产科", value: 5 },
  { label: "超声医学科", value: 6 },
  { label: "眼科", value: 7 },
  { label: "感染科", value: 8 },
  { label: "口腔科", value: 9 },
  { label: "骨科", value: 10 },
  { label: "康复科", value: 11 },
  { label: "急诊科", value: 12 },
  { label: "耳鼻咽喉科", value: 13 },
  { label: "皮肤科", value: 14 },
  { label: "麻醉科", value: 15 },
  { label: "营养科", value: 16 },
  { label: "心理科", value: 17 },
  { label: "中医科", value: 18 },
  { label: "药学门诊", value: 19 },
  { label: "全科医学科门诊", value: 20 }
]);

// 向父组件发射事件
const emits = defineEmits(["handleChange"]);
const handleChange = val => {
  emits("handleChange", val);
};
</script>

<style lang="scss">
.el-select__wrapper {
  background-color: transparent;
  color: #ffffff;
  box-shadow: 0 0 0 1px #ebedf057 inset;
}
</style>
